import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { Table,Input,Button } from 'antd';
import moment from 'moment';

const TableComponent = () => {
  const [dataa, setData] = useState([]);
  const [currentPage, setCurrentPage] = useState(1);
  const [totalPages, setTotalPages] = useState(0);
  const [searchTerm,setSearchTerm] =useState('');
  const [filteredData, setFilteredData] = useState([]);
  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      const response = await axios.get(`https://r5ctn9z9.lc-cn-n1-shared.com/1.1/classes/people`, {
        headers: {
            " X-LC-Id": "r5CTN9z96pCW8mI8fx9YxOmw-gzGzoHsz",
            "X-LC-Key": "8gSsl4Sz0ILMiQeMNMA8xQqg",
            "Content-Type": ""
        }
       
      }).then((res) => {
        console.log(res)
        const formattedData = res.data.results.map((item) => ({
        //  formattedData = moment(item.createdAt).format('YYYY-MM-DD');
           ...item,
            key: item.objectId, // 将objectId作为key值
           

            createdAt: moment(item.createdAt).format('YYYY-MM-DD HH:mm:ss'),
            updatedAt:moment(item.updatedAt).format('YYYY-MM-DD HH:mm:ss'),
           
           
          }));
          
        setData(formattedData);

        // const filtered = res.data.filter(item => item.name.includes(searchTerm));
        // setFilteredData(filtered);

        setTotalPages(Math.ceil(res.data.count / 10));
      });
      
      
    } catch (error) {
      console.log(error);
    }
  };
// 分页
  const handlePageChange = (page) => {
    setCurrentPage(page);
  };

  const columns = [
    {
        title: '用户名ID',
        dataIndex: 'objectId',
        key: 'objectId'
      },
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username'
    },
    {
        title: '创建时间',
        dataIndex: 'createdAt',
        key: 'createdAt'
      },
      {
        title: '更新时间',
        dataIndex: 'updatedAt',
        key: 'updatedAt'
      }
      // ,{
      //   title: 'Action',
      //   key: 'action',
      //   render: (_, record) => (
      //     <Space size="middle">
      //       <a>Invite {record.name}</a>
      //       <a>Delete</a>
      //     </Space>
      //   ),
      // },
   
    // Add more columns as needed
  ];

//   const handleChange = (event) => {
//     setSearchTerm(event.target.value);
//   };

  const handleSearch = () => {
    console.log("搜索内容：", searchTerm,dataa);
    const filtered = dataa.filter(item => item.username.includes(searchTerm));
    // 在这里可以执行你的查询操作，展示结果等
    setFilteredData(filtered)
  };


  const datanew = () =>{
    const pageSize = 10;
    const data = filteredData.length > 0 ? filteredData : dataa;
    const startIndex = (currentPage - 1) * pageSize;
    const endIndex = startIndex + pageSize;
    return data.slice(startIndex, endIndex);
  }
  return (
    <div>
        <Input style={{width:'300px'}} type='text' value={searchTerm} onChange={(e) => {setSearchTerm(e.target.value)}}/>
        <Button onClick={handleSearch}>搜索</Button>
      <Table
        dataSource={datanew()}
        columns={columns}
        // item={columns}
        // dateFormat="yyyy-MM-dd"
        pagination={{
          current: currentPage,
          total: totalPages * 10,
          pageSize: 10,
          onChange: handlePageChange
        }}
      />
    </div>
  );
};

export default TableComponent;